<template>
  <view class="page-bg">
    <!-- 企业名称与标签 -->
    <view class="header-card">
      <view class="card-left">
        <image :src="imgUrl + companyInfo.logoUrl" mode="aspectFill" class="company-logo" />
      </view>
      <view class="card-right">
        <view class="company-title">
            <view style="width: 300rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{companyInfo.enterpriseName}}</view>
            <view class="company-tag">{{getEmLabel(companyInfo.memberLevelId)}}</view>
        </view>
        <!-- <view class="company-tags">
            <view class="tag">供应链管理</view>
            <view class="tag">15年经验</view>
            <view class="tag">AAA级信用</view>
        </view> -->
        <view class="company-stats">
            <view class="stat">
            <view class="stat-num">{{supplyCount}}</view>
            <view class="stat-label">供应信息</view>
            </view>
            <view class="stat">
            <view class="stat-num orange">{{demandCount}}</view>
            <view class="stat-label">采购需求</view>
            </view>
        </view>
      </view>
    </view>
    <!-- 基础信息 -->
    <view class="section">
      <view class="section-header">
        <view class="section-title">
          <u-icon name="info-circle-fill" color="#409eff" size="22" style="margin-right:8rpx;" />
          基础信息
        </view>
      </view>
      <view class="info-list">
        <view class="info-item">
          <u-icon name="map-fill" color="#3a7afe" size="22" />
          <view class="info-label">企业地址</view>
          <view class="info-value">{{companyInfo.address}}</view>
        </view>
        <view class="info-item">
          <u-icon name="phone-fill" color="#3a7afe" size="22" />
          <view class="info-label">联系电话</view>
          <view class="info-value">
            {{companyInfo.contactPhone}}
            <button class="info-btn" size="mini" @click="callPhone">拨打</button>
          </view>
        </view>
        <view class="info-item">
          <u-icon name="account-fill" color="#3a7afe" size="22" />
          <view class="info-label">联系人</view>
          <view class="info-value">
            {{companyInfo.contactPerson}}
            <!-- <button class="info-btn" size="mini">咨询</button> -->
          </view>
        </view>
        <view class="info-item">
          <u-icon name="man-add-fill" color="#3a7afe" size="22" />
          <view class="info-label">负责人</view>
          <view class="info-value">陈明亮（董事长）</view>
        </view>
        <view class="info-item">
          <u-icon name="calendar-fill" color="#3a7afe" size="22" />
          <view class="info-label">成立时间</view>
          <view class="info-value">{{companyInfo.createTime}}</view>
        </view>
      </view>
    </view>
        <!-- 企业简介 -->
    <view class="section">
      <view class="section-header">
        <view class="section-title">
          <u-icon name="file-text-fill" color="#409eff" size="22" style="margin-right:8rpx;" />
          企业简介
        </view>
      </view>
      <up-read-more :show-height="180" color="#409eff">
        <view class="section-content">{{companyInfo.introduction}}</view>
        <!-- <rich-text :nodes="content"></rich-text> -->
      </up-read-more>
    </view>
    <!-- 企业风采 -->
    <view class="section">
      <view class="section-header">
        <view class="section-title">
          <u-icon name="photo-fill" color="#409eff" size="22" style="margin-right:8rpx;" />
          企业风采
        </view>
        <!-- <view class="section-more">查看全部 <u-icon name="arrow-right" color="#409eff" size="18" /></view> -->
      </view> 
      <view class="showcase-list">
        <view class="showcase-item" v-for="(item,index) in companyInfo.enterpriseStylePic.split(',')" :key="index">
          <image :src="imgUrl+item" class="showcase-img" mode="aspectFill" @click="previewImage(item)" />
          <!-- <view class="showcase-title">{{ item.title }}</view> -->
        </view>
      </view>
    </view>

    <!-- 底部悬浮按钮 -->
    <view class="fixed-footer">
      <button class="footer-btn phone-btn" @click="callPhone">
        <u-icon name="phone-fill" color="#3a7afe" size="28" />
        电话联系
      </button>
      <!-- <button class="footer-btn consult-btn" @click="onlineConsult">
        <u-icon name="chat-fill" color="#fff" size="28" />
        在线咨询
      </button> -->
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {imgUrl} from '@/config/index.js'
import {getEnterpriseInfo,getEnterpriseInfoById,getDict,getSupplyCount} from '@/api/index.js'
import {onLoad} from '@dcloudio/uni-app'

onLoad((options) => {
  getDict('em_type').then(res => {
    emType.value = res.data
  })
  if(options.id){
    getEnterpriseInfoById({id:options.id}).then(res=>{
      console.log(res);
      companyInfo.value = res.data
    })
  }else{
    // 获取企业详情
    getEnterpriseInfo().then(res=>{
      console.log(res);
      companyInfo.value = res.data
      getSupplyCount({id:res.data.id}).then(res=>{
        console.log(res);
        supplyCount.value = res.data.supplyCount
        demandCount.value = res.data.demandCount
      })
    })
  }
})
let emType = ref([])

const getEmLabel=(type)=>{ 
  let index=emType.value.findIndex(i=>i.dictValue==type)
  return index>-1?emType.value[index].dictLabel:''
}
let companyInfo = ref({})
let supplyCount = ref(0)
let demandCount = ref(0)

const previewImage = (img) => {
  uni.previewImage({
    urls: [imgUrl+img],
  })
}


const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: companyInfo.value.contactPhone
  })
}

const onlineConsult = () => {
  uni.navigateTo({
    url: '/pages/consult/online'
  })
}
</script>

<style scoped lang="scss">
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.header-card {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 0 0 0;
  padding: 32rpx 32rpx 0 32rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  display: flex;
  gap: 20rpx;
  align-items: center;
}
.card-left{
    width: 200rpx;
    height: 200rpx;
    .company-logo{
        width: 200rpx;
        height: 200rpx;
        border-radius: 20rpx;
    }
}
.card-right{ 
    flex: 1;
}
.company-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  gap: 18rpx;
}
.company-tag {
  background: #19be6b;
  color: #fff;
  font-size: 20rpx;
  border-radius: 12rpx;
  padding: 4rpx 18rpx;
  margin-left: 12rpx;
}
.company-tags {
  display: flex;
  gap: 18rpx;
  margin: 18rpx 0 0 0;
}
.tag {
  background: #f4f8ff;
  color: #3a7afe;
  font-size: 24rpx;
  border-radius: 12rpx;
  padding: 4rpx 18rpx;
}
.company-stats {
  display: flex;
  gap: 48rpx;
  margin: 32rpx 0 0 0;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-num {
  font-size: 40rpx;
  font-weight: bold;
  color: #3a7afe;
}
.stat-num.orange {
  color: #faad14;
}
.stat-label {
  font-size: 24rpx;
  color: #888;
  margin-top: 4rpx;
}
.section {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 0 0 0;
  padding: 24rpx 32rpx 24rpx 32rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
}
.section-more {
  color: #409eff;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}
.showcase-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}
.showcase-item {
  width: 46%;
  aspect-ratio: 1.4/1;
  border-radius: 18rpx;
  overflow: hidden;
  position: relative;
  margin-bottom: 18rpx;
  background: #f7f8fa;
}
.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18rpx;
  display: block;
}
.showcase-title {
  position: absolute;
  left: 18rpx;
  bottom: 18rpx;
  color: #fff;
  font-size: 26rpx;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);
}
.info-list {
  margin-top: 8rpx;
}
.info-item {
  display: flex;
  align-items: center;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 28rpx;
}
.info-item:last-child {
  border-bottom: none;
}
.info-label {
  width: 140rpx;
  color: #888;
  margin-left: 18rpx;
}
.info-value {
  flex: 1;
  color: #222;
  margin-left: 18rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12rpx;
}
.info-btn {
  background: #f4f8ff;
  color: #3a7afe;
  border-radius: 10rpx;
  font-size: 24rpx;
  padding: 4rpx 18rpx;
  margin-left: 12rpx;
  border: none;
}
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -4rpx 24rpx 0 rgba(64,158,255,0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 24rpx 24rpx 24rpx;
  z-index: 99;
  gap: 24rpx;
}
.footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 18rpx;
//   padding: 24rpx 0;
  border: none;
  gap: 16rpx;
}
.phone-btn {
  background: #f4f8ff;
  color: #3a7afe;
}
.consult-btn {
  background: #3a7afe;
  color: #fff;
}
</style>